<script setup lang="ts">
import type { HotItem } from '@/types/home'

// 使用props接收父组件传递的数据
defineProps<{
    list: HotItem[]
}>()
</script>

<template>
    <!-- 推荐专区 -->
    <view class="panel hot">
        <view class="item" v-for="item in list" :key="item.id">
            <view class="title">
                <text class="title-text">{{ item.title }}</text>
                <text class="title-desc">{{ item.alt }}</text>
            </view>
            <navigator hover-class="none" :url="`/pages/hot/hot?type=${item.type}`" class="cards">
                <image v-for="src in item.pictures" :key="src" :src="src" class="image" mode="aspectFit"></image>
            </navigator>
        </view>
    </view>
</template>

<style lang="scss">
/* H5端默认开启scoped样式隔离, 导致组件基础样式无效 */
@import './styles/HotPanel.scss';
</style>